import React, { useState } from 'react';

const App = () => {
    const [val, setVal] = useState('')
    const [list, setList] = useState([])
    return (
        <div>
            <h1>todolist</h1>
            <input
                type="text"
                value={val}
                onChange={({ target: { value } }) => {
                    setVal(value)
                }} />
            <button
                onClick={() => {
                    setList((prev) => {
                        prev.push({
                            isEdit: false,
                            id: Date.now(),
                            value: val,
                            status: false // false未完成 true已完成
                        })
                        // react更新视图 监听的是指针 指针不改变则不会触发更新视图
                        // 所以应用类型的更新 必须返回一个新的指针
                        return [...prev]
                    })
                }}
            >
                确定
            </button>
            <h1>待完成</h1>
            <ul>
                {list.filter(item => !item.status).map((item, index) => {
                    return <li key={index}>
                        {!item.isEdit
                            ?
                            item.value
                            :
                            <input value={item.value} onChange={({ target: { value } }) => {
                                item.value = value;
                                setList(prev => {
                                    return [...prev] // 返回新指针
                                })
                            }}></input>}
                        <button onClick={() => {
                            item.isEdit = !item.isEdit
                            setList(prev => {
                                return [...prev] // 返回新指针
                            })
                        }}>{item.isEdit ? "完成编辑" : "编辑"}</button>
                        <button
                            onClick={() => {
                                item.status = true; // 直接修改内存
                                setList(prev => {
                                    return [...prev] // 返回新指针
                                })
                            }}
                        >完成</button>
                        <button onClick={() => {
                            setList(prev => {
                                const ind = prev.findIndex(item2 => item.id == item2.id)
                                prev.splice(ind, 1)
                                return [...prev] // 返回新指针

                            })
                        }}>删除</button>
                    </li>
                })}
            </ul>
            <h1>已完成</h1>
            {list.filter(item => item.status).map((item, index) => {
                return <li key={index}>
                    {item.value}
                    <button onClick={() => {
                        setList(prev => {
                            const ind = prev.findIndex(item2 => item.id == item2.id)
                            prev.splice(ind, 1)
                            return [...prev] // 返回新指针

                        })
                    }}>删除</button>
                </li>
            })}
        </div>
    );
}

export default App;
